// import React, { Component } from 'react'


import React from 'react';
import ReactDOM from 'react-dom';

import axios from 'axios'
// import { NavigationControl, InfoWindow } from 'react-bmapgl';


// 按需导入 加载速度快一些
// import Map from 'react-bmapgl/Map'
// import Marker from 'react-bmapgl/Overlay/Marker'

//引入封装好的NavHeader组件 
import NavHeader from '../../components/NavHeader/NavHeader'



// import './index.scss'
import styles from './index.module.css'


// console.log(styles)

// 导入BASE_URL
import { BASE_URL } from '../../utils/url'






{


    /*
//     第一步 在public/index.html  加入 

//  这来需要加入 http:
//  <script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>



//  第二步申请秘钥   RrDpUNP99Bop3xUhGWmPLlgug6yXhRvn


//  第三步 安装 npm install react-bmapgl --save
   
*/



}



//根据地理位置获取地图找房信息 
// - 获取当前定位城市
// - 使用 地址解析器 解析当前城市坐标
// - 调用 centerAndZoom() 方法在地图中展示当前城市，并设置缩放级别为11
// - 在地图中添加比例尺和平移缩放控件

// var map = new BMapGL.Map('container');
// map.centerAndZoom(new BMapGL.Point(116.331398,39.897445), 12);
// //创建地址解析器实例
// var myGeo = new BMapGL.Geocoder();
// // 将地址解析结果显示在地图上，并调整地图视野
// myGeo.getPoint('北京市海淀区上地10街', function(point){
//     if(point){
//         map.centerAndZoom(point, 16);
//         map.addOverlay(new BMapGL.Marker(point, {title: '北京市海淀区上地10街'}))
//     }else{
//         alert('您选择的地址没有解析到结果！');
//     }
// }, '北京市')






// ### 2 创建文本覆盖物

// - 创建Label 示例对象
// - 掉用setStyle() 方法设置样式
// - 在map对象上调用 addOverlay() 方法，讲文本覆盖物添加到地图中



// 创建文本标注对象
// var label = new BMapGL.Label('欢迎使用百度地图JSAPI GL版本', opts);
// // 自定义文本标注样式
// label.setStyle({
// color: 'blue',
// borderRadius: '5px',
// borderColor: '#ccc',
// padding: '10px',
// fontSize: '16px',
// })
// // 把覆盖物添加到地图上
// map.addOverlay(label)


const BMapGL = window.BMapGL



// async  function getHouseList(id) {
   
// }


// let getHouseList=async (id)=>{
//     let url = '/houses/cityId=' + id
//     let res = await axios.get(url)
//     console.log('getHouseListRes', res)
//     this.setState({
//         housesList: res.data.body.list,
//         isShowList: true
//     })

// }



class MapIndex extends React.Component {

    state = {
        position: {
            // lng: 116.402544, lat: 39.928216

            lng: 114.496921, lat: 30.557341

        },
        housesList: [],
        isShowList: false  // 是否展示小区列表
    }
    //    componentDidMount() {
    //判断是否支持 获取本地位置
    //  if (navigator.geolocation) {
    //     var n = navigator.geolocation.getCurrentPosition(function(res){
    //         console.log(res); // 需要的坐标地址就在res中
    //     });
    //  } else {
    //      alert('该浏览器不支持定位');
    //  }

    //    }


    componentDidMount() {
        this.__initMap()





    }


    __initMap() {

        //   1    获取当前定位城市
        var curCity = localStorage.getItem('curCity')
        var valueId = localStorage.getItem('id')

        var map = new BMapGL.Map('container');

        this.map = map
        // this.getHouseList=getHouseList
        //  2  使用 地址解析器 解析当前城市坐标
        var myGeo = new BMapGL.Geocoder();

        myGeo.getPoint(curCity, async (point) => {
            console.log(point)


            var latitude = point.lng
            var longitude = point.lat
            if (point) {
                // 3 调用 centerAndZoom() 方法在地图中展示当前城市，并设置缩放级别为11
                map.centerAndZoom(point, 11);



                // map.addOverlay(new BMapGL.Marker(point, { title: curCity + '机场xxx' }))

                // 在地图中添加比例尺和平移缩放控件

                var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
                map.addControl(scaleCtrl);
                var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
                map.addControl(zoomCtrl);
                var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
                map.addControl(cityCtrl);
                map.enableScrollWheelZoom(true); //开启滚轮




                // let url=`http://e.ludir.cn:8081/area/map?id=${valueId}`
                //   console.log('----- 封装的后期数据的代码-----')
                this.renderOverlays(valueId)



            } else {
                alert('您选择的地址没有解析到结果！');
            }
        }, curCity)


    }



    //  设置地图覆盖物  实现画圆形

    createCircleMask(map, point, curCity, count = 10, valueId, nextZoom) {

        var newPoint = new BMapGL.Point(point.longitude, point.latitude)


        var opts = {
            position: newPoint, // 指定文本标注所在的地理位置
            offset: new BMapGL.Size(-50, -28)// 设置文本偏移量
            // new BMapGL.Size(30, -30) 
        };

        // 创建文本标注对象

        console.log('opts', opts)
        var label = new BMapGL.Label('', opts);
        label.setContent(`
                <div class="${styles.bubble}">
                <p class="${styles.name}">${curCity}  ${count}套</p> 
              </div>
            `)
        // 设置调用setStyle() 方法设置样式


        const labelStyle = {
            cursor: 'pointer',
            border: '0px solid rgb(255,0,0)',
            padding: '0px',
            whiteSpace: 'nowrap',
            fontSize: '12px',
            color: 'rbg(255,255,255)',
            textAlign: 'center'
        }


        label.setStyle(labelStyle)

        // 把覆盖物添加到地图上

        // console.log('mask')
        //添加点击事情
        label.addEventListener('click', () => {
            alert('点击')
            // 放大地图，以当前点击的覆盖物为中心放大地图
            // var newPoint = new BMapGL.Point(    point.longitude, point.latitude)

            // function setNewZoom() {
            //     var zoom = document.getElementById('zoominput').value;
            //     map.setZoom(zoom);
            // }

            // console.log(nextZoom)

            map.centerAndZoom(newPoint, nextZoom + 1)

            setTimeout(function () {
                map.clearOverlays()
            }, 0)




            this.renderOverlays(valueId)




        })


        // console.log(map)
        map.addOverlay(label)
        // 清除地图上的覆盖物



    }




    // 设置地图覆盖物 实现 画长方形 
    createCreatMask(map, point, curCity, count = 10, id) {
        let newPoint = new BMapGL.Point(point.longitude, point.latitude)


        // 创建覆盖物
        const label = new BMapGL.Label('', {
            position: newPoint,
            offset: new BMapGL.Size(-50, -28)
        })

        // 给 label 对象添加一个唯一标识
        label.id = id  // 需要外面传递过来

        // 设置房源覆盖物内容
        label.setContent(`
        <div class="${styles.rect}">
          <span class="${styles.housename}">${curCity}</span>
          <span class="${styles.housenum}">${count}套</span>
          <i class="${styles.arrow}"></i>
        </div>
      `)



        // 覆盖物样式
        const labelStyle = {
            cursor: 'pointer',
            border: '0px solid rgb(255, 0, 0)',
            padding: '0px',
            whiteSpace: 'nowrap',
            fontSize: '12px',
            color: 'rgb(255, 255, 255)',
            textAlign: 'center'
        }


        // 设置样式
        label.setStyle(labelStyle)
        // console.log('createCreatMask 走了吗')



        // 添加单击事件
        label.addEventListener('click', e => {
            // 获取并渲染房源数据
            // console.log(this)
            // getHousesList(id)
             this.getHouseList(id)

             console.log('e',e)

            // 获取当前被点击项
            // const target = e.changedTouches[0]
            map.panBy(   // panBy  这个滑到  移动
                window.innerWidth / 2 - 50,
                (window.innerHeight - 330) / 2 - 50
            )



        })

        // 添加覆盖物到地图中
        map.addOverlay(label)





    }


    //获取小区房源信息

    async getHouseList(id) {

        
        let url=BASE_URL+'/houses/cityId=' + id
        let res = await axios.get(url)
        console.log('getHouseListRes',res)
        this.setState({
            housesList: res.data.body?res.data.body.list:[],
            isShowList: true
        })
    }


    //结构
    /* 房源列表 */
    /* 添加 styles.show 展示房屋列表 */





    // 封装渲染房屋列表的方法
    renderHousesList() {
        if(this.state.housesList.length<=0) {
       return  false
        }


        return this.state.housesList.map(item => (
            <div className={styles.house} key={item.houseCode}>
                <div className={styles.imgWrap}>
                    <img className={styles.img} src={BASE_URL + item.houseImg} alt="" />
                </div>
                <div className={styles.content}>
                    <h3 className={styles.title}>{item.title}</h3>
                    <div className={styles.desc}>{item.desc}</div>
                    <div>
                        {/* ['近地铁', '随时看房'] */}
                        {item.tags.map((tag, index) => {
                            const tagClass = 'tag' + (index + 1)
                            return (
                                <span
                                    className={[styles.tag, styles[tagClass]].join(' ')}
                                    key={tag}
                                >
                                    {tag}
                                </span>
                            )
                        })}
                    </div>
                    <div className={styles.price}>
                        <span className={styles.priceNum}>{item.price}</span> 元/月
          </div>
                </div>
            </div>
        ))
    }







    //添加全局渲染覆盖物以及获取到覆盖物的缩放类型 
    async renderOverlays(valueId) {
        let url = `http://e.ludir.cn:8081/area/map?id=${valueId}`
        let result = await axios.get(url)

        // console.log(result.data.body)

        const { nextZoom, type } = this.getTypeAndZoom()

        console.log(nextZoom, type)


        let resList = result.data.body
        resList.forEach((v, index) => {

            this.createOverlays(this.map, v, type, nextZoom)
            // var point=v.coord;
            // var { coord: { latitude, longitude } } = v
            // var count = v.count
            // var curCity = v.label

            // // 调用创建覆盖物函数
            // this.createCircleMask(this.map, { longitude, latitude }, curCity, count)




        })




    }


    // 调用 getTypeAndZoom 方法获取地图缩放级别，覆盖物类别  实现当前点击的具体是区或者是镇

    // 计算要绘制的覆盖物类型和下一个缩放级别
    // 城区   -> 11 ，范围：>=10 <12
    // 镇   -> 13 ，范围：>=12 <14
    // 小区 -> 15 ，范围：>=14 <16
    //  getTypeAndZoom(map){

    //     let nextZoom, type
    //     // const zoom = this.map.getZoom()
    //     var zoom=map.getZoom()
    //     return {
    //         nextZoom,
    //         type
    //     }


    //  }



    getTypeAndZoom() {

        let nextZoom, type
        // const zoom = this.map.getZoom()
        var zoom = this.map.getZoom()



        if (zoom >= 10 && zoom < 12) {
            nextZoom = 11;
            type = 'circle'
        } else if (zoom >= 12 && zoom < 14) {
            nextZoom = 13;
            type = 'circle'
        } else if (zoom >= 14 && zoom < 16) {
            nextZoom = 15;
            type = 'creact'
        }

        console.log(zoom)




        return {
            nextZoom,
            type
        }


    }


    // let { coord: { longitude, latitude }, label: areaName, count, value } = item
    // let point = new window.BMap.Point(longitude, latitude)

    // 这个方法没有太多的逻辑，主要是逻辑判断，然后根据不同条件调用不同渲染的方法
    createOverlays(map, v, type, nextZoom) {
        var point = v.coord;
        var { coord: { latitude, longitude } } = v
        var count = v.count
        var curCity = v.label
        var value = v.value
        // console.log('------');
        //             console.log(point)
        //             console.log(count)
        //             console.log(curCity)
        //             console.log(value)
        //             console.log(type)
        //   console.log('------');



        if (type == 'circle') { // 画圆
            this.createCircleMask(map, point, curCity, count, value, nextZoom)



        } else { // 画长方形   镇 房源数据
            console.log('方形')
            this.createCreatMask(map, point, curCity, count, value)



        }

    }














    //    className='NavBox'
    render() {
        let { lng, lat } = this.state.position
        return (<div>

            <NavHeader> 地图显示页面</NavHeader>




            {/* <Map center={{ lng: 116.402544, lat: 39.928216 }} zoom="11" className='Map'

                style={{ height: 800 }}
            >
                <Marker position={{ lng, lat }} />
                <NavigationControl />
                <InfoWindow position={{ lng, lat }} text="内容" title="我是地图 出来啊" />
            </Map> */}

            {/* <div id={styles.container}   id='container'></div> */}

            <div id="container" className={styles.container} />




            <div className={styles.houseItems}>
                {/* 房屋结构 */}
                {this.renderHousesList()}
            </div>

        </div>)



    }
}


export default MapIndex

